<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<header th:replace="manage/head :: html"></header>

<body class="cbp-spmenu-push">
<div class="main-content"  id="pageId" pageId="materialstoremanage">

    <div th:replace="manage/menu :: html"></div>

    <!-- main content start-->
    <div id="page-wrapper">
        <div class="main-page">
            <h2 class="title1"> 原材料库存管理</h2>
            <div class="panel-body widget-shadow">

                <div class="form-body">
                        <div class="form-group">


                            <form class="form-inline">
                                <label>名称：</label>
                                <input type="text" id="materialTypeName_search" class="form-control"  placeholder="原材料名称"/>
                                <button type="button" class="btn btn-warning" onclick="loadMaterialStore()">查询
                                </button>

                                <button type="button" class="btn btn-info" data-toggle="modal"
                                        data-target="#gridSystemModal">添加
                                </button>

                            </form>

                        </div>

                </div>

                <table class="table">
                    <thead>
                    <tr>
                        <!--编号、品牌、成色需求、目标价格、数量-->
                        <th>#</th>
                        <th>名称</th>
                        <th>度量单位</th>
                        <th>剩余数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="materialStore_tb">
                    <tr>
                        <td>#</td>
                        <td>涤纶</td>
                        <td>kg</td>
                        <td>500kg</td>
                        <td><a href="#">入库</a> <a href="#">修正库存</a> <a href="#">库存记录</a>&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--//footer-->
</div>


<!--我想买添加框-->
<div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">库存信息</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" id="saveMaterialType-form">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">原材料种类</label>
                        <div class="col-sm-9">
                            <select name="materialTypeId" id="materialTypeSelect">
                                <option value="0">-请选择-</option>
                            </select>

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">数量</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="currentStore" placeholder="请填入数量"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveMaterialStore()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
    $('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->

<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
    var menuLeft = document.getElementById('cbp-spmenu-s1'),
        showLeftPush = document.getElementById('showLeftPush'),
        body = document.body;

    showLeftPush.onclick = function () {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuLeft, 'cbp-spmenu-open');
        disableOther('showLeftPush');
    };

    function disableOther(button) {
        if (button !== 'showLeftPush') {
            classie.toggle(showLeftPush, 'disabled');
        }
    }
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->

<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>


<script>

    $(document).ready(function() {
        loadMaterialStore();
        loadMaterialType();
    });

    function loadMaterialType(){
        $.post("/api/materialtype/searchMaterialType.do",
            { //需要传入后代的数据
            },
            function (message) {
                var result = message;
                var typeOption ="";
                for (var i in result.materialtypeDOList) {

                    typeOption += '<option value="'+result.materialtypeDOList[i].id+'">'+result.materialtypeDOList[i].typename+'</option>';
                }
                $("#materialTypeSelect").html(typeOption);

            }
        );
        // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
        return false;
    }

    function loadMaterialStore() {
        $("#materialStore_tb").html("loading...");
        $.post("/api/materialstore/searchMaterialStore.do",
            { //需要传入后代的数据
                materialTypeName : $("#materialTypeName_search").val()
            },
            function (message) {
                var result = message;
                var materialStore ="";
                for (var i in result.materialstoreDOList) {

                    materialStore += '<tr>'+
                        '    <td>'+result.materialstoreDOList[i].id+'</td>'+
                        '    <td>'+result.materialstoreDOList[i].materialTypeName+'</td>'+
                        '    <td>'+result.materialstoreDOList[i].unit+'</td>'+
                        '    <td>'+result.materialstoreDOList[i].currentStore+'</td>'+
                        '    <td><a href="#">入库</a> <a href="#">修正库存</a> <a href="#">库存记录</a>&nbsp;</td>'+
                        '    </tr>';

                }
                $("#materialStore_tb").html(materialStore);

            }
        );
        // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
        return false;
    }

    function saveMaterialStore() {


        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/api/materialstore/saveMaterialStore.do" ,//url
            data: $('#saveMaterialType-form').serialize(),
            success: function (message) {
                var result = message;
                alert(result.resultMessage);
                if (result.result) {
                    // 刷新页面
                    window.location.reload();
                }

            },
            error : function() {
                alert("保存异常！");
            }
        });
        // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
        return false;
    }

</script>


</body>
</html>